<template>
  <div>
    <el-form
      ref="form"
      class="relotform"
      label-width="80px"
      size="mini"
      style="width:480px;margin:auto;"
    >
      <el-form-item label="在线支付"></el-form-item>
      <el-form-item label="商品名称:">
        <span style="font-size:16px">{{title}}</span>
      </el-form-item>
      <el-form-item label="门票价格:">
        <span style="color:red;font-size:20px">{{price}}元</span>
      </el-form-item>
      <el-form-item label="支付金额:">
        <span style="color:red;font-size:20px">{{price}}元</span>
      </el-form-item>
      <el-form-item label="添加备注:">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
      </el-form-item>
      <el-form-item label="支付方式:">
        <el-radio-group size="medium">       
          <img @click="handlePay(0)" src="@/static/home/1.jpg" :class="{active:isPlay==0}" alt />

          <img @click="handlePay(1)" src="@/static/home/2.jpg" :class="{active:isPlay==1}" alt />
        </el-radio-group>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">立即支付</el-button>
        <el-button @click="handleback">取消支付</el-button>
      </el-form-item>
    </el-form>
    <!-- 对话框 -->
    <el-dialog title="请支付" :visible.sync="dialogVisible" align="center" width="320px">
      <img style="width:80%" src="../static/home/zfb.png" v-if="isPlay==0" alt />
      <img style="width:80%" src="../static/home/wx.png" v-if="isPlay==1" alt />
    </el-dialog>
  </div>
</template>

<script>
import { post } from "../plugins/api";
export default {
  data() {
    return {
      isPlay: 0,
      title: "",
      price: "",
      dialogVisible: false
    };
  },
  methods: {
    onSubmit() {
      this.dialogVisible = true;
      // console.log("submit!");
      if (this.dialogVisible == true) {
        setTimeout(() => {
          this.$message.success("支付成功");
          this.dialogVisible = false;
          // this.handleback();
          this.successplay();
        }, 3000);
      }
    },
    successplay() {
      let data = {
        title: this.title,
        price: this.price,
        username: this.$store.state.username,
        uid:this.$store.state.uid
      };
      post("/travel/order_play", data).then(res => {
        console.log(res);
      });
    },
    handleback() {
      this.dialogVisible = false;
      this.$router.back();
    },
    handlePay(val) {
      this.isPlay = val;
    }
  },
  mounted() {
    let { title, price } = this.$route.query;
    this.title = title;
    this.price = price;
  }
};
</script>
<style lang="scss" scoped>
.relotform {
  img {
    width: 100px;
    height: 50px;
    margin-right: 10px;
    &.active {
      border: 3px solid red;
    }
  }
}
</style>
